<template>
    <div class="doorMachine">
        <div class="crumbs">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>设备管理</el-breadcrumb-item>
                <el-breadcrumb-item>门口机</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search" style="margin-left: 10px;">搜索
                </el-button>
            </div>
            <el-table :data="data" border max-height="600" class="table" ref="multipleTable" fit stripe highlight-current-row
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column v-if='false' prop="id" label="id" sortable>
                </el-table-column>
                <el-table-column v-if='false' prop="region" label="region" sortable>
                </el-table-column>
                <el-table-column v-if='false' prop="updaycount" label="updaycount" sortable>
                </el-table-column>
                <el-table-column prop="eventId" width="185" label="事件id" sortable>
                </el-table-column>
                <el-table-column prop="date" label="日期" sortable>
                </el-table-column>
                <el-table-column prop="deviceSerial" label="设备系列">
                </el-table-column>
                <el-table-column prop="photo" label="照片">
                    <template slot-scope="scope">
                        <el-image style="width: 100%; height: 100%" :src="scope.row.pictureURL" fit="fill"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="channelNo" label="通道编号" :formatter="formatter">
                </el-table-column>
                <el-table-column prop="channelName" label="通道名称">
                </el-table-column>
                <el-table-column prop="eventType" label="事件类型">
                </el-table-column>
                <el-table-column prop="eventCode" label="事件码">
                </el-table-column>
                <el-table-column prop="eventDescription" label="事件描述">
                </el-table-column>
                <el-table-column prop="detailInfo" label="详情">
                </el-table-column>
                <el-table-column prop="eventRemark" label="评论">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { GETTOKEN, CONSUMER, MESSAGE  } from '@/api/api.js'
import axios from 'axios'
import testData from '@/static/shebei.json'
export default {
    name: "doorMachine",
    data() {
        return {
            testData: testData,
            tableData: [],
            select_cate: '',
            select_word: '',
            del_list: [],
            is_search: false,
        }
    },
    computed: {
        data() {
            return this.tableData.filter((d) => {
                let is_del = false;
                for (let i = 0; i < this.del_list.length; i++) {
                    if (d.name === this.del_list[i].name) {
                        is_del = true;
                        break;
                    }
                }
                if (!is_del) {
                    if (d.eventId.indexOf(this.select_cate) > -1 && (d.channelName.indexOf(this.select_word) > -1 ||
                            d.eventId.indexOf(this.select_word) > -1)) {
                        return d;
                    }
                }
            })
        }
    },
    mounted() {
        this.getToken()
        this.getConsumerMessage('1')
    },
    methods: {
        // 海康：获取token
        async getToken() {
            let that = this
            let nowHK_token = localStorage.getItem('HKToken')
            if(nowHK_token !== '' || nowHK_token !== undefined || nowHK_token !== null) {
                let params = new FormData()
                params.append('client_id','34b6bb33fc134018b9238dd284ae6123')
                params.append('client_secret','01edadaecf92409c922610ad3af17f34')
                params.append('grant_type','client_credentials')
                params.append('scope','app')
                await that.$http.post(`/HK/${GETTOKEN}`, params)
                .then(res => {
                    localStorage.setItem('HKToken', res.data.access_token)
                    that.createConsumer(res.data.access_token)
                })
            } else {
                that.createConsumer(nowHK_token)
            }
        },
        // 海康：创建消费者
        async createConsumer(token){
            let that = this
            axios.defaults.headers.common['Authorization'] = `bearer ${token}`
            await that.$POST(`/HK${CONSUMER}/group1`, null)
            .then(res => {
                if(res.code == 200) {
                    that.getConsumerMessage(res.data.consumerId)
                } else if(res.code == 514004){
                    console.log(res)
                } else {
                    localStorage.removeItem('HKToken')
                    that.getToken()
                }
            })
        },
        // 海康：获取消费信息
        async getConsumerMessage(consumerId) {
            let that = this
            let params = new FormData()
            // params.append('consumerId', consumerId)
            // await that.$POST(`/HK${MESSAGE}`, params)
                // .then(res => {
                    let res = that.testData
                    if(res.code == 200) {
                        var data = []
                        for (let i = 0; i < res.data.length; i++) {
                            let resHead = JSON.parse(res.data[i].content)
                            var obj = {}
                            obj.eventId = resHead.eventId
                            obj.date = that.$moment(resHead.dateTime).format("MMM Do YYYY")
                            obj.channelName = resHead.channelName
                            obj.eventType = resHead.eventType
                            obj.eventCode = resHead.eventCode
                            obj.eventDescription = resHead.eventDescription
                            obj.pictureURL = resHead.pictureURL
                            obj.detailInfo = resHead.detailInfo
                            obj.eventRemark = resHead.eventRemark
                            data[i] = obj
                        }
                        that.tableData = data
                        console.log(that.tableData)
                    }
                // })
        },
        formatter(row, column) {
            return row.status;
        },
        search() {
            this.is_search = true;
        },
        add() {
            this.addVisible = true;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
    }
}
</script>
<style lang="scss" scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
</style>